<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Home</title>
    <link crossorigin="anonymous" integrity="sha384-O/BGwnfw6uRonLZRgEc5L2yiQLzZCGYZiS4qCPvTKbJqXU9XKZwXagTN4EuskkZ4" href="https://lib.baomitu.com/zTree.v3/3.5.01/css/zTreeStyle/zTreeStyle.css" rel="stylesheet">    <!-- Main Styles -->
    <link rel="stylesheet" href="../static/styles/style.min.css">

    <!-- Material Design Icon -->
    <link rel="stylesheet" href="../static/fonts/material-design/css/materialdesignicons.css">

    <!-- mCustomScrollbar -->
    <link rel="stylesheet" href="../static/plugin/mCustomScrollbar/jquery.mCustomScrollbar.min.css">

    <!-- Waves Effect -->
    <link rel="stylesheet" href="../static/plugin/waves/waves.min.css">

    <!-- Sweet Alert -->
    <link rel="stylesheet" href="../static/plugin/sweet-alert/sweetalert.css">

    <!-- Morris Chart -->
    <link rel="stylesheet" href="../static/plugin/chart/morris/morris.css">

    <!-- FullCalendar -->
    <link rel="stylesheet" href="../static/plugin/fullcalendar/fullcalendar.min.css">
    <link rel="stylesheet" href="../static/plugin/fullcalendar/fullcalendar.print.css">

    <!-- Dark Themes -->
<!--    <link rel="stylesheet" href="/styles/style-black.min.css">-->
</head>

<body>
<div th:replace="menu"></div>
<div th:replace="nav"></div>

<div id="wrapper">
    <div class="main-content">
        <div class="row small-spacing">
            <div class="toolbar-btn-action">
                <button class="btn btn-primary m-r-5" type="button" onclick="assign()"><i class="mdi mdi-plus"></i>分配权限</button>
            </div>
            <div class="col-xs-12">
                <input type="hidden" name="rid" id="rid" th:value="${rid}">
                <div class="card-body">

                    <ul id="treeDemo" class="ztree"></ul>
                </div>
                <!-- /.box-content -->
            </div>
        </div>
    </div>
</div><!--/#wrapper -->
<script src="../static/scripts/jquery.min.js"></script>
<script src="../static/plugin/mCustomScrollbar/jquery.mCustomScrollbar.concat.min.js"></script>
<script src="../static/scripts/html5shiv.min.js"></script>
<script src="../static/scripts/respond.min.js"></script>
<script crossorigin="anonymous" integrity="sha384-GEV+wCDi3CfDUk9X6WjZt772Xgm+2NvPxfBwKQecg4PqJdMJHobJKWNahjcaxuX3" src="https://lib.baomitu.com/zTree.v3/3.5.01/js/jquery.ztree.all.min.js"></script>

<script src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script>


<!--<![endif]&ndash;&gt;-->
<!--
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->

<script src="https://cdn.bootcdn.net/ajax/libs/layer/3.1.1/layer.min.js"></script>
<script src="../static/scripts/modernizr.min.js"></script>
<script src="../static/plugin/bootstrap/js/bootstrap.min.js"></script>
<script src="../static/plugin/nprogress/nprogress.js"></script>
<script src="../static/plugin/sweet-alert/sweetalert.min.js"></script>
<script src="../static/plugin/waves/waves.min.js"></script>

<!-- Responsive Table -->
<script src="../static/plugin/RWD-table-pattern/js/rwd-table.min.js"></script>
<script src="../static/scripts/rwd.demo.min.js"></script>


<script src="../static/scripts/main.min.js"></script>
<script type="text/javascript">
    let funcTreeObj;

    let setting = {
        async: {
             enable: true,
            url: "/permission/assignPermissionShow",
        },
        check: {
            enable: true
        },
        view: {
            expandSpeed: "normal",
            selectedMulti: false,
        },
    };

    function show() {
        funcTreeObj = $.fn.zTree.init($("#treeDemo"), setting);

        setTimeout(init, 100);
    }

    function assign() {
        console.log(funcTreeObj.getCheckedNodes(true));
        let info = "";
        let checkedObjs = funcTreeObj.getCheckedNodes(true);  //获取所有选中的节点
        for (let i = 0; i < checkedObjs.length; i++) {
            info += checkedObjs[i].pmid + ",";

        }
        let rid = $("#rid").val();
        console.log(funcTreeObj)
        $.ajax({
            url: "/permission/assignDo",
            data: {"rid":rid, "pids": info},
            type: "post",
            success: function (obj) {
                if (obj.result) {
                    layer.msg("分配权限成功", {time: 1000, icon: 6, shift: 6}, function () {
                        show();
                    })
                } else {
                    layer.msg("分配权限失败", {time: 1000, icon: 5, shift: 6}, function () {
                    })
                }
            }
        });
    }

    function init() {
        let rid = $("#rid").val();

        $.ajax({
            url: "/permission/showPermission",
            data: {"rid":rid},
            type: "post",
            success: function (obj) {
                if (obj.result) {
                    if (obj.pids != null) {
                        let datas = obj.pids.split(',');
                        for (let i = 0; i < datas.length; i++) {
                            let node = funcTreeObj.getNodeByParam("pmid", datas[i]);
                            if (node != null) {
                                funcTreeObj.checkNode(node, true, false);

                            }
                        }
                    }
                } else {
                    layer.msg("系统繁忙，稍后再试", {time: 1000, icon: 5, shift: 6}, function () {
                    })
                }
            }
        })
    }

    $(document).ready(function () {
        layer.msg("加载中", {time: 200, icon: 16, shift: 5}, function () {
            show();
        });//layer
    });//入口

</script>
</body>
</html>